<template>
    <div class="user">
        <el-card>
            <el-card>
                <h2 class="m-0">个人信息页</h2>
                <el-divider />
                <el-form>
                    <el-form-item label="头像:">
                        <el-avatar :src="userIn.userImg" />
                    </el-form-item>
                    <el-form-item label="用户名:">
                        <p class="p-0 m-0">{{ userIn.nickName }}</p>
                    </el-form-item>
                    <el-form-item label="个人信息:">
                        <p class="p-0 m-0">{{ userIn.desc }}</p>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card>
                <h2 class="m-0">修改个人信息</h2>
                <el-divider />

                <el-form label-width="100px">
                    <el-form-item label="更改头像"><el-upload v-model:file-list="fileList" class="upload-demo" action="#"
                            :http-request="httpRequest">
                            <el-button type="primary">上传头像</el-button>
                            <template #tip>
                                <div class="el-upload__tip">
                                </div>
                            </template>
                        </el-upload></el-form-item>
                    <el-form-item label="更改用户名">
                        <div class="flex">
                            <el-button type="primary" class="mr-5" @click="submitname">提交更改</el-button>
                            <el-input v-model="name"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="更改个人信息">
                        <div class="flex">
                            <el-button @click="submitdesc" type="primary" class="mr-5">提交更改</el-button>
                            <el-input v-model="desc" :rows="2" maxlength="30" type="textarea"
                                style="width:300px;"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="修改密码">
                        
                        <div class="ml-10">
                            <div>新密码：<el-input v-model="news"></el-input></div>
                        <div>旧密码：<el-input v-model="old"></el-input></div>
                       
                        </div>
                        <el-button type="primary" class="ml-1 mt-5" @click="getpw">提交修改</el-button>
                    </el-form-item>
                     
                </el-form>
            </el-card>
        </el-card>
    </div>
</template>
<script>
import { getFindMy, getUpdateAvatar, getupdateNickName, getupdateDesc, getUpdatePassword } from '@/api/login'
import { useUserStore } from '@/store/modules/user'
export default {
    data() {
        return {
            userIn: '',
            imageUrl: '',
            fileList: [],
            name: '',
            desc: '',
            news: '',
            old: ''
        }
    },
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            const res = await getFindMy()
            console.log(res)
            this.userIn = res.result[0]
            console.log(this.userIn, 'asdas')
            const store = useUserStore()
            store.username = this.userIn.nickName
        },
        getBase64Image(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    const imgBase64Data = reader.result;
                    resolve(imgBase64Data);
                };
                reader.onerror = function (error) {
                    reject(error);
                };
            });
        },

        async httpRequest(res) {
            console.log(res)
            const base = await this.getBase64Image(res.file)
            console.log(base)
            const result = await getUpdateAvatar(res.file.type.split('/'), base)
            console.log(result)
            this.getData()
        },
        async submitname() {
            await getupdateNickName(this.name)
            this.getData()
        },
        async submitdesc() {
            await getupdateDesc(this.desc)
            this.getData()
        },
        async getpw() {
            await getUpdatePassword(this.news, this.old)
        }
    }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border: 1px dashed #000;
}

.el-form {
    width: 500px;

    .el-input,
    .el-textarea__inner {
        width: 300px;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #000;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: red;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>